<template>
	<view class="content">
		<!-- 饼环示例1-开始 -->
		<view class="chart-con f f-a-c">
			<view class="chart-wrap">
				<view class="ring-chart ">
					<l-echart ref="ringChart"></l-echart>
				</view>
			</view>
			<view class="nums p-t-30 m-l-30">
				<view v-for="(item,index) in listNum" :key="index" class="f f-a-c">
					<view class="dian m-r-10"
						:class="{ind1:index==0||index==9||index==18||index==27||index==36,ind2:index==1||index==10||index==19||index==28||index==37
						,ind3:index==2||index==11||index==20||index==29||index==38||index==46,ind4:index==3||index==12||index==21||index==30||index==39||index==48,
						ind5:index==4||index==13||index==22||index==31||index==40||index==49,ind6:index==5||index==14||index==23||index==32||index==41||index==50,
						ind7:index==6||index==15||index==24||index==33||index==42||index==51||index==58,ind8:index==7||index==16||index==25||index==34||index==43||index==52,
						ind9:index==8||index==17||index==26||index==35||index==44||index==53,ind10:index==9||index==18||index==27||index==36||index==45||index==54}">
					</view>
					<view class="book m-r-80">
						<!-- w e q q w e q w e q w e q w e q w e q w e q w e q w e w q q w e e 
						     e w q e q w e w q e q w e q w e w q e q w e w q e q w e q w e q w -->
						{{item.name}}
					</view>
					<view class="num">
						{{item.count}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		props: {
			listNum: {
				type: Array,
				default: [],
				require: true
			}
		},
		data() {
			return {
				list: [],
				listObj: []
			}
		},
		// mounted() {
		// 	//加载饼环数据--示例1
		// 	this.loadRingData();
		// 	//加载饼环数据--示例2

		// 	// 
		// },
		mounted() {
			this.loadRingData();
		},
		updated() {
			this.loadRingData();
		},
		// onShow() {

		// },
		computed: {
			num() {
				console.log(this.listNum, '00.00.0.0.0000.0000');
				let n = []
				this.listNum.forEach(item => {
					n.push(item.count)
				})
			}
		},
		methods: {
			// async defty() {
			// 	await this.$nextTick()

			// },
			//加载饼环数据,这里可以去请求服务器获取数据
			async loadRingData() {
				await this.$nextTick()
				//这里请求服务器得到数据
				let data = [
					// {
					// 	value: 10
					// },
					// {
					// 	value: 20
					// },
					// {
					// 	value: 30
					// },
					// {
					// 	value: 40
					// },
					// {
					// 	value: 50
					// },

				];
				// this.list = data
				this.listNum.forEach(item => {
					data.push({
						value: item.count
					})
				})
				// console.log(data, '123456789');
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				this.$refs.ringChart.init(echarts, chart => {
					chart.setOption({
						series: [{
							type: 'pie',
							// selectedMode: 'single',
							// selectedOffset: 0,
							// hoverAnimation: false,
							radius: [30, 70],
							left: 'center',
							width: '98%',
							//指向label的线设置
							labelLine: {
								length: 0,
								length2: 0,
								maxSurfaceAngle: 80
							},
							//布局样式
							labelLayout: function(params) {
								console.log(params,
									'123456789111111111111111111111111111111111');
							},
							//数据
							data: data
						}]
					});

					//监听图标项点击事件
					chart.on("click", function(e) {
						for (var i = 0; i < data.length; i++) {
							if (i != e.dataIndex) {
								chart.dispatchAction({
									type: 'downplay', //取消高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							} else {
								chart.dispatchAction({
									type: 'highlight', //突出高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							}
						}
					});
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.dian {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}

	.ind1 {
		background-color: #5470c6;
	}

	.ind2 {
		background-color: #91cc75;
	}

	.ind3 {
		background-color: #fac858;
	}

	.ind4 {
		background-color: #ee6666;
	}

	.ind5 {
		background-color: #73c0de;
	}

	.ind6 {
		background-color: #3ba272;
	}

	.ind7 {
		background-color: #fc8452;
	}

	.ind8 {
		background-color: #9a60b4;
	}

	.ind9 {
		background-color: #ea7ccc;
	}

	.num {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
	}

	.nums {
		height: 300rpx;
		overflow-y: auto;
	}

	.nums::-webkit-scrollbar {
		width: 0;
	}

	.book {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
	}

	.content {
		width: 100%;
		// background-color: #f1f3f2;
		padding: 20rpx 0rpx 100rpx;
	}

	.t-sm {
		font-size: 22rpx;
		color: #6e6e6e;
		padding-left: 10rpx;
	}

	.chart-con {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 28rpx;
		overflow-y: auto;

		.chart-wrap {
			// width: 100%;
			box-sizing: border-box;
			// background-color: #ffffff;
			padding: 32rpx 0rpx;
			border-radius: 20rpx;

			.title {
				box-sizing: border-box;
				width: 100%;
				padding: 0rpx 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.ver-line {
				height: 30rpx;
				width: 8rpx;
				border-radius: 10rpx;
				background-color: #4e9d77;
			}

			.title-desc {
				font-size: 30rpx;
				color: #222222;
				margin-left: 22rpx;
				font-weight: bold;
			}

			.ring-chart {
				height: 350rpx;
				width: 350rpx;
				// width: 100%;
				box-sizing: border-box;
				padding: 0rpx 28rpx;
				margin-top: 32rpx;
				margin-left: -50rpx;
			}
		}
	}

	.gap {
		margin-top: 30rpx;
	}
</style>